<script lang="ts" setup>
import { useLocale } from '@/locale/locale';
import { useRouter } from '@/router';
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
import { getCommissionDetail } from '@/api/user';
import { isWechat } from '@/utils/platform';

const { t } = useLocale();
const router = useRouter();
const info = ref();

async function getInfo(id: number) {
  const res = await getCommissionDetail(id);
  if (res.code == 0) {
    info.value = res.data;
  }
}

onLoad(async (options) => {
  getInfo(options!.id);
});
</script>

<template>
  <uni-nav-bar
    v-if="isWechat()"
    :border="false"
    :title="t('LDKey_distributionCommissionDetail')"
    fixed
    left-icon="left"
    status-bar
    @click-left="router.back"
  />
  <view class="distribution-order-detail-contain">
    <view class="distribution-order-detail-contain-v">
      <image src="/static/distribution/img9.png" />
      <view class="distribution-order-detail-contain-v-title">
        {{ t('LDKey_distributionCommissionDetailReturn') }}
      </view>
      <view class="distribution-order-detail-contain-v-price">
        <text class="distribution-order-detail-contain-v-price-t1">¥</text>
        {{ info.rebateAmount ? info.rebateAmount : 0 }}
        <text class="distribution-order-detail-contain-v-price-t2">JPY</text>
      </view>
      <view
        v-if="info.rebateStatus == 'WAIT'"
        class="distribution-order-detail-contain-v-status wait"
      >
        {{ t('LDKey_distributionCommissionOrderSettlement') }}
      </view>
      <view
        v-else-if="info.rebateStatus == 'SUCCESS'"
        class="distribution-order-detail-contain-v-status success"
      >
        {{ t('LDKey_distributionCommissionDetailSettlementSuccess') }}
      </view>
      <view class="distribution-order-detail-contain-v-item">
        <view>{{ t('LDKey_distributionCommissionDetailOrderNo') }}</view>
        <view>{{ info.orderSn }}</view>
      </view>
      <view class="distribution-order-detail-contain-v-item">
        <view>{{ t('LDKey_distributionCommissionDetailCreateTime') }}</view>
        <view>{{ info.createdAt }}</view>
      </view>
      <view class="distribution-order-detail-contain-v-item">
        <view>{{ t('LDKey_distributionCommissionDetailOrderAmount') }}</view>
        <view class="weight">{{ info.orderAmount ? info.orderAmount : 0 }}</view>
      </view>
      <view class="distribution-order-detail-contain-v-item">
        <view>{{ t('LDKey_distributionCommissionDetailCommissionRate') }}</view>
        <view class="weight">{{ info.rebateRate ? info.rebateRate : 0 }}%</view>
      </view>
      <view class="distribution-order-detail-contain-v-item">
        <view>{{ t('LDKey_distributionCommissionDetailArrivalTime') }}</view>
        <view>{{ info.rebateTime ? info.rebateTime : '--' }}</view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.distribution-order-detail {
  &-contain {
    padding: 24rpx;

    &-v {
      background: #ffffff;
      border-radius: 20rpx;
      padding: 48rpx 72rpx 82rpx 32rpx;

      image {
        display: block;
        width: 68rpx;
        height: 68rpx;
        margin: 0 auto;
      }

      &-title {
        margin-top: 22rpx;
        text-align: center;
        font-weight: 400;
        font-size: 28rpx;
        color: #3d3d3d;
        line-height: 40rpx;
      }

      &-price {
        margin-top: 8rpx;
        font-weight: 400;
        font-size: 60rpx;
        color: #3d3d3d;
        line-height: 72rpx;
        text-align: center;

        &-t1 {
          font-size: 28rpx;
        }

        &-t2 {
          font-size: 24rpx;
        }
      }

      &-status {
        margin-top: 8rpx;
        margin-bottom: 32rpx;
        text-align: center;
        font-weight: 400;
        font-size: 28rpx;
        line-height: 40rpx;

        &.wait {
          color: #269c74;
        }

        &.success {
          color: #e87b15;
        }
      }

      &-item {
        display: flex;
        align-items: center;

        view {
          &:first-child {
            font-weight: 400;
            font-size: 28rpx;
            color: #adaeb0;
            line-height: 80rpx;
          }

          &:last-child {
            margin-left: 48rpx;
            flex: 1;
            font-weight: 400;
            font-size: 28rpx;
            color: #3d3d3d;
            line-height: 80rpx;

            &.weight {
              font-weight: 600;
            }
          }
        }
      }
    }
  }
}
</style>
